<template>
  <div>
    <div class="main">
      <input
        type="text"
        v-model="q"
        class="input"
        placeholder="请输入歌曲名称"
        @keyup.enter="search"
      />
      <ul class="list">
        <li
          class="item"
          v-for="item in list"
          :key="item.id"
          @click="getSongUrl(item.id)"
        >
          <span class="name">{{ item.name }}</span>
          <span class="singer">{{ item.artists[0].name }}</span>
        </li>
      </ul>
      <audio :src="musicUrl" controls class="mp3" autoplay></audio>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      list: [],
      musicUrl: '',
      q: ''
    }
  },
  created () {
    // this.getList()
  },
  methods: {
    async getList () {
      const res = await axios({
        url: 'http://119.91.150.211:9000/personalized/newsong',
        params: {
          q: Math.random()
        }
      })
      this.list = res.data.result
      console.log(res)
    },
    async getSongUrl (id) {
      const res = await axios({
        url: 'http://119.91.150.211:9000/song/url',
        params: {
          id: id,
          q: Math.random()
        }
      })
      this.musicUrl = res.data.data[0].url
      console.log(res)
    },
    async search () {
      const res = await axios({
        url: 'http://119.91.150.211:9000/search?keywords=' + this.q,
        params: {
          q: Math.random()
        }
      })
      this.list = res.data.result.songs
      console.log(res)
    }
  }
}
</script>
<style lang="less" scoped>
.main {
  width: 600px;
  margin: 0 auto;
  .input {
    width: 100%;
    height: 34px;
    padding-left: 15px;
    box-sizing: border-box;
  }
  .list {
    border: 2px solid black;
    list-style: none;
    .item {
      height: 32px;
      line-height: 32px;
      color: #999;
      &:hover {
        color: #000;
      }
      display: flex;
      .name {
        flex: 1;
      }
      .singer {
        width: 200px;
      }
    }
  }
  .mp3 {
    width: 100%;
  }
}
</style>
